<template>
  <div class="box">
    <div class="content">
      <div class="title">
        <h2>排行榜</h2>
      </div>
      <el-affix>
        <el-tabs v-model="activeName" :stretch="true">
          <el-tab-pane label="熱門" name="tab1" />
          <el-tab-pane label="收藏" name="tab2" />
          <el-tab-pane label="喜欢" name="tab3" />
        </el-tabs>
      </el-affix>
      <div class="inner">
        <BtnBar :round="true" :currentIndex="0" :btnList="btnList" />
        <div class="line">
          <el-collapse>
            <el-collapse-item name="1">
              <template #title="{ isActive }">
                <div :class="['title-wrapper', { 'is-active': isActive }]">
                  热门日榜
                  <el-icon class="header-icon">
                    <info-filled />
                  </el-icon>
                </div>
              </template>
              <div>
                <p>排行榜统计说明：</p>
                <p>
                  热门榜/收藏棒/喜欢榜依据作品每日/周/月的人气值/收藏数/喜欢数涨幅排序，每天
                  0:00 更新。
                </p>
              </div>
              <div>
                <p>排行榜更新时间：</p>
                <p>2025.08.05 00:00</p>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-icon>
                <Expand />
              </el-icon>日榜
              <el-icon>
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>日榜</el-dropdown-item>
                <el-dropdown-item>周榜</el-dropdown-item>
                <el-dropdown-item>月榜</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="works-list">
          <div class="work-item" v-for="(item, index) in 4" :key="index">
            <div class="top">
              <div class="image">
                <img src="../assets/images/book3.jpg" alt />
                <div class="tag">完结</div>
                <div class="paiming-box">
                  <div class="paiming-box-boss paiming-box-boss-1" v-if="index == 0">{{ index + 1 }}</div>
                  <div class="paiming-box-boss paiming-box-boss-2" v-if="index == 1">{{ index + 1 }}</div>
                  <div class="paiming-box-boss paiming-box-boss-3" v-if="index == 2">{{ index + 1 }}</div>
                  <div class="paiming-box-boss" v-if="index != 0 && index != 1 && index != 2">{{ index + 1 }}</div>
                </div>
              </div>
              <div class="text">
                <span class="work-tit">旅行者</span>
                <span class="work-author">Div</span>
                <span class="work-author work-author-1">銀鍊、項圈、支配</span>
                <span class="work-info">
                  ★ 出版情報：下集 2023/11/29正式開賣！ 《旅行者
                  (下)》／定價：300元 更多書籍资讯：https://reurl.cc/x6V855
                  •《地獄》系列暢銷作家Div嶄新代表作，冒險系網遊小说突入最終章！
                  •收錄《旅行者》第二部全文、單行本獨家收錄感動番外篇。
                  •首刷限定：鸚鵡洲特繪雙主角Q版可愛杯墊！一共兩款．隨機贈送（※首刷售完即無贈品）
                </span>
              </div>
            </div>
            <div class="bottom">
              <div class="count">
                <div>
                  <img class="count-img" src="../assets/images/wujue.png" alt />
                  <span>0</span>
                </div>
                <div>
                  <img class="count-img" src="../assets/images/details.png" alt />
                  <span>18</span>
                </div>
              </div>
              <div class="zan">
                <img class="count-img" src="../assets/images/wujue-1.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import BtnBar from "../components/BtnBar.vue";
import {
  Flag,
  BellFilled,
  ChatDotRound,
  Notification,
  View,
  Star,
  InfoFilled,
  Expand,
  Search,
  ArrowDown
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const activeName = ref("tab2");
const paihangList = ref(
  {
    color: ""
  },
  {
    color: ""
  },
  {
    color: ""
  },
  {
    color: ""
  }
);

const tabList1 = ref([
  {
    id: "1",
    type: 1,
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    id: "2",
    type: 1,
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    id: "3",
    type: 2,
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    id: "4",
    type: 2,
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  }
]);

const tabList2 = ref([
  {
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  },
  {
    type: 2,
    tit:
      "EROLABS工口實驗室玩家專屬！18+輕小说看到飽！Kado+日輕訂閱制免費７日暢讀！",
    date: "2025.08.02 19:00"
  }
]);

const tabList3 = ref([
  {
    dateTime: "2025.08.02 19:00",
    avatarSrc: "",
    name: "周小洮",
    text: "「魯比娜朝這則貼文点了「讚」」"
  }
]);

const btnList = [
  {
    text: "全部",
    src: "",
    href: "/search"
  },
  {
    text: "日常温馨",
    src: "",
    href: "/search"
  },
  {
    text: "西幻",
    src: "",
    href: "/search"
  },
  {
    text: "奇幻",
    src: "",
    href: "/search"
  },
  {
    text: "未来科幻",
    src: "",
    href: "/search"
  },
  {
    text: "重生穿越",
    src: "",
    href: "/search"
  },
  {
    text: "玄幻仙侠武侠",
    src: "",
    href: "/search"
  },
  {
    text: "犯罪悬疑推理",
    src: "",
    href: "/search"
  },
  {
    text: "恐怖惊悚灵异",
    src: "",
    href: "/search"
  },
  {
    text: "青春校园",
    src: "",
    href: "/search"
  },
  {
    text: "现代社会",
    src: "",
    href: "/search"
  },
  {
    text: "古代历史",
    src: "",
    href: "/search"
  },
  {
    text: "近代民国",
    src: "",
    href: "/search"
  },
  {
    text: "其他架空世界观",
    src: "",
    href: "/search"
  }
];

const handleTab1Click = item => {
  router.push({ name: "announce_detail", params: { id: item.id } });
};
</script>

<style lang="scss" scoped>
.paiming-box {}

.paiming-box-boss {
  color: white;
  margin-left: 10px;
  width: 25px;
  height: 25px;
  position: relative;
  top: -30px;
  right: 5px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.paiming-box-boss-1 {
  background-color: #FAC573;
}

.paiming-box-boss-2 {
  background-color: #AEB3C0;
}

.paiming-box-boss-3 {
  background-color: #D69985;
}

.box {
  min-height: 100vh;
}

.content {
  max-width: 984px;
  margin: 0 auto;
  padding: 0 20px;

  .title {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.5rem;
    height: 4rem;
    position: relative;
  }

  h2 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #2d3748;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .el-affix {
    display: flex;
    flex-flow: row;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3rem;
    position: sticky;
    z-index: 10;
    background: #fff;
    top: 0rem;
    margin-bottom: 2rem;

    :deep(.el-tabs__item) {
      flex: 1 1 0px;
      position: relative;
      height: 100%;
      width: 100%;
      height: 3rem;
      min-width: 8rem;
    }
  }

  .line {
    position: relative;
    margin-top: 1.2rem;
  }

  .ranking-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;

    .item {
      .top {
        display: flex;
        gap: 16px;
        height: 165px;

        .image {
          width: 112px;

          img {
            max-width: 100%;
          }
        }

        .text {
          width: 168px;
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .count {
          display: flex;
          align-items: center;
          gap: 8px;

          div {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}

:deep(.el-collapse) {
  border-bottom: none;
}

:deep(.el-collapse-item__header) {
  background: none;
  border-bottom: none;
}

:deep(.el-collapse-item__arrow) {
  display: none;
}

:deep(.el-collapse-item__wrap) {
  background: none;
}

:deep(.el-dropdown) {
  position: absolute;
  right: 0;
  top: 20px;
}

:deep(.el-dropdown-link) {
  display: flex;
  gap: 8px;
}

.count-img {
  width: 15px;
}

.work-author-1 {
  color: #FE8674 !important;
}


</style>